import React, { useEffect, useState } from 'react'
import pluginFactory from 'components'
import Map from 'components/map'

function App() {
  const [width, setWidth] = useState(document.documentElement.offsetWidth - 10)
  const lineChart = pluginFactory().getChart('line')
  const pieChart = pluginFactory().getChart('pie')
  const barChart = pluginFactory().getChart('bar')
  const mapChart = pluginFactory().getChart('map')
  const mapEchartChart = pluginFactory().getChart('map-echart')

  const resize = (ev: UIEvent) => {
    setWidth(document.documentElement.offsetWidth - 10)
  }
  useEffect(() => {
    window.addEventListener('resize', resize)
    return () => {
      window.removeEventListener('resize', resize)
    }
  }, [])
  return (
    <div className="App">
      <section>
        {
          lineChart?.chart({
            width: width,
            height: 50,
            key: 'Day',
            value: 'SUM(AIR_TIME)',
            formData: [
              { Day: 'Friday', 'SUM(AIR_TIME)': 1943661 },
              { Day: 'Saturday', 'SUM(AIR_TIME)': 1798845 },
              { Day: 'Monday', 'SUM(AIR_TIME)': 1048653 },
              { Day: 'Thursday', 'SUM(AIR_TIME)': 1626157 },
              { Day: 'Sunday', 'SUM(AIR_TIME)': 1048653 },
              { Day: 'Sunday', 'SUM(AIR_TIME)': 1048653 },
              { Day: 'Saturday', 'SUM(AIR_TIME)': 1798845 },
              { Day: 'Monday', 'SUM(AIR_TIME)': 5048653 },
              { Day: 'Thursday', 'SUM(AIR_TIME)': 1626157 },
              { Day: 'Sunday', 'SUM(AIR_TIME)': 1048653 },
              { Day: 'Saturday', 'SUM(AIR_TIME)': 179845 },
              { Day: 'Monday', 'SUM(AIR_TIME)': 1048653 },
              { Day: 'Thursday', 'SUM(AIR_TIME)': 1626157 },
              { Day: 'Sunday', 'SUM(AIR_TIME)': 1048653 },
            ],
          })
        }
        <hr />
        {
          barChart?.chart({
            width: width,
            height: 150,
            label: {
              color: '#3da754',
              formatter: ['{sss}', 'xxx']
            },
            showBackground: true,
            formData: {
              Friday: 123,
              Saturday: 123,
              Monday: 123,
              Thursday: 2123,
              Sunday: 1123,
              saa: 1,
            }
          })
        }
        <hr />
        {
          pieChart?.chart({
            width: width,
            height: 350,
            label: {
              color: '#3da754',
              // formatter: ['{sss}', 'xxx']
            },
            showBackground: true,
            formData: [{
              value: 335,
              name: "Apple"
            }, {
              value: 310,
              name: "Grapes"
            }, {
              value: 234,
              name: "Pineapples"
            }, {
              value: 135,
              name: "Oranges"
            }, {
              value: 1548,
              name: "Bananas"
            }]
          })
        }
        <hr />
        {
          mapChart?.chart({
            width: width,
            height: 600,
          })
        }
        <hr />
        {
          mapEchartChart?.chart({
            width: 600,
            height: 600,
          })
        }
        <hr />
        <hr />
        <hr />
        <hr />
      </section>
    </div>
  )
}

export default App